<template>
  <!-- 注册页面 -->
  <div class="flex items-center justify-center h-full bg-gradient-to-br from-primary/90 to-secondary/90 p-4">
    <div
        class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-8 transform transition-all duration-300 hover:scale-[1.01]">
      <div class="text-center mb-8">
        <h3 class="text-[clamp(1rem,2vw,1.5rem)] font-bold text-dark">创建账号</h3>
        <p class="text-gray-500 mt-2">开始你的聊天之旅</p>
      </div>

      <form class="space-y-4">
        <div>
          <label for="register-username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
          <div class="relative">
                  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                    <i class="fa fa-user"></i>
                  </span>
            <input
                type="text"
                id="register-username"
                v-model="registerForm.username"
                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300"
                placeholder="请输入用户名"
                required />
          </div>
        </div>

        <div>
          <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
          <div class="relative">
                  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                    <i class="fa fa-envelope"></i>
                  </span>
            <input type="email"
                id="register-email"
                v-model="registerForm.contact"
                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300"
                placeholder="请输入邮箱"
                required />
          </div>
        </div>

        <div>
          <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
          <div class="relative">
                  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                    <i class="fa fa-lock"></i>
                  </span>
            <input
                type="password"
                id="register-password"
                v-model="registerForm.password"
                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300"
                placeholder="请输入密码"
                required />
          </div>
        </div>

        <div>
          <label for="register-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
          <div class="relative">
                  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                    <i class="fa fa-lock"></i>
                  </span>
            <input
                type="password"
                id="register-confirm-password"
                v-model="registerForm.confirmPassword"
                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300"
                placeholder="请再次输入密码"
                required />
          </div>
        </div>

        <div class="flex items-center">
          <input id="agree-terms" type="checkbox" v-model="agree"
                 class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
          <label for="agree-terms" class="ml-2 block text-sm text-gray-700">
            我同意 <a href="#" class="text-primary hover:underline">服务条款</a> 和 <a href="#"
                                                                                       class="text-primary hover:underline">隐私政策</a>
          </label>
        </div>
        <button type="button" @click.prevent="clickRegister"
                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg hover:shadow-xl flex items-center justify-center">
          <span>注册</span>
          <i class="fa fa-arrow-right ml-2"></i>
        </button>
      </form>

      <div class="mt-6 text-center">
        <p class="text-gray-600">
          已有账号?
          <button @click="emits('togglePane', 'login')"
                  class="font-medium text-blue-600 hover:text-blue-500 transition-colors">立即登录
          </button>
        </p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import 'element-plus/es/components/message/style/css'
import {ElMessage} from 'element-plus'
import {defineEmits, ref} from "vue";
import {useRouter} from 'vue-router';
import {useLoginStore} from '../../stores/login_store.ts'
import LoginApi from '../../api/login.js';

const emits = defineEmits([
  "togglePane"
])

// const loginStore = useLoginStore()
const router = useRouter()

// let passwordVisible = ref(false);
const agree = ref(false);

let registerForm = ref({
  username: '',
  contact: '',
  password: '',
  confirmPassword: '',
  verifyCode: '',
})

const clickRegister = async () => {
  console.log("发送注册接口....")
  if (!agree.value) {
    ElMessage.info("需要勾选同意服务条款，才能注册账号")
    return
  }

  const data = {
    username: registerForm.value.username,
    password: window.btoa(registerForm.value.password), // base64编码
    code: registerForm.value.verifyCode,
    email: '',
    phone: ''
  };
  // 只能是邮箱或手机号
  if (registerForm.value.contact.indexOf("@") > 0) {
    data.email = registerForm.value.contact;
  } else {
    data.phone = registerForm.value.contact;
  }

  console.debug("request register api ... ", data);
  const resp = await LoginApi.signUp(data) // 发送注册请求
  if (resp.ok) {
    emits('togglePane', 'success', {account: registerForm.value.username, contact: registerForm.value.contact});
    ElMessage.success("账号注册成功")
  } else {
    ElMessage.error(resp.msg)
  }

}

</script>
<style scoped>

</style>